<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-20 15:55:11
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-01 18:22:18
 * @FilePath: /XMate-h5/src/views/myXmate/components/scoreCardItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="score-card-item bg-white mb-4 pb-4 shadow-sm rounded-lg overflow-hidden">
    <!-- 顶部标题区域 -->
    <div class="flex items-center h-11 mb-4 bg-gradient-to-l from-white to-[#E4EDFF]">
      <span class="text-[#262626] ml-4 font-medium text-sm">{{ title }}</span>
      <el-tooltip v-if="tooltipContent?.length > 0" :content="tooltipContent" placement="top">
        <van-icon class="ml-1" name="question-o" color="#8E8E8E" />
      </el-tooltip>
    </div>

    <!-- 数据展示区域 -->
    <div class="px-4">
      <div class="grid grid-cols-2 gap-4 py-4">
        <template v-for="(item, index) in visibleItems" :key="index">
          <div class="flex flex-col">
            <span class="text-gray-500 text-sm mb-1">{{ item.title }}</span>
            <div class="flex flex-row items-center">
              <div class="flex items-baseline">
                <span class="text-2xl font-medium">{{ item.content || "-" }}</span>
                <span v-if="item.unit" class="text-gray-500 text-sm ml-1">{{
                  item.unit
                }}</span>
              </div>
              <!-- 添加growth显示 -->
              <div v-if="item.growth" class="ml-2 flex items-center">
                <template v-if="item.growth === 'error'">
                  <span class="text-sm text-gray-400">-</span>
                </template>
                <template v-else>
                  <van-icon
                    name="play"
                    :color="Number(item.growth) > 0 ? '#0FAD72' : '#E14F4F'"
                    :class="Number(item.growth) > 0 ? '-rotate-90' : 'rotate-90'"
                    size="12"
                  />
                  <span
                    :class="[
                      'text-sm ml-1',
                      Number(item.growth) > 0 ? 'text-green-500' : 'text-red-500',
                    ]"
                  >
                    {{ Number(item.growth) > 0 ? "+" : "-" }}
                    {{ Math.abs(item.growth) }}%
                  </span>
                </template>
              </div>
            </div>
            <!-- growth -->
          </div>
        </template>
      </div>

      <!-- 展开/收起按钮 -->
      <span class="text-[#436BFF] text-sm cursor-pointer" @click="toggleExpand">
        {{ isExpanded ? "收起下级详情" : "展开下级详情" }}
        <van-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" />
      </span>

      <template v-if="isExpanded">
        <div class="mt-5 flex row gap-2 text-nowrap overflow-x-auto">
          <div
            :class="` ${
              tabActive === index
                ? 'text-[#436BFF] bg-[#ECF0FF] text-sm rounded-full px-4 py-1'
                : 'bg-[#F4F5F6] text-[#595959] text-sm rounded-full px-4 py-1'
            } text-nowrap whitespace-nowrap `"
            v-for="(item, index) in tabList"
            :key="item"
            @click="handleTabClick(index)"
          >
            {{ tabTitles[index] }}
          </div>
        </div>

        <p class="text-[#BFBFBF] text-xs my-4">
          各部门完成情况如下，可逐个点击查看具体明细
        </p>

        <!-- 评分进度 -->
        <van-empty v-if="tabList[tabActive].list.length === 0" description="暂无数据" />

        <ScoreProgress
          v-else
          :total-score="12"
          :progress-items="tabList[tabActive]"
          :fixedNum="items[tabActive].fixedNum || 0"
          @click="handleClick"
        />
      </template>
    </div>

    <van-action-sheet v-model:show="showSalesTargetDetails" :title="name">
      <div class="h-[680px]">
        <salesTargetDetails v-if="showSalesTargetDetails" :id="id" />
      </div>
    </van-action-sheet>

    <van-action-sheet v-model:show="showSalesCapabilityAssessment" :title="name">
      <div class="h-[680px]">
        <salesCapabilityAssessment
          v-if="showSalesCapabilityAssessment"
          :id="id"
          :ssoUserId="ssoUserId"
        />
      </div>
    </van-action-sheet>

    <van-action-sheet v-model:show="showSalesTaskDetail" :title="name">
      <div class="h-[680px]">
        <salesTaskDetail v-if="showSalesTaskDetail" :id="id" :ssoUserId="ssoUserId" />
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import ScoreProgress from "./scoreProgress.vue";
import salesCapabilityAssessment from "@/views/myXmate/myTeam/teamNoticeBoard/visitSituation/salesCapabilityAssessment.vue";
import salesTargetDetails from "@/views/myXmate/myTeam/teamNoticeBoard/visitSituation/salesTargetDetails.vue";
import salesTaskDetail from "@/views/myXmate/myTeam/teamNoticeBoard/visitSituation/salesTaskDetail.vue";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  tooltipContent: {
    type: String,
    required: true,
  },
  type: {
    type: String,
  },
  items: {
    type: Array,
    required: true,
    validator: (items) => {
      return items.every((item) => "title" in item && "content" in item);
    },
  },
  isTeam: {
    type: Boolean,
    required: true,
  },
  enableChart: {
    type: Boolean,
    default: false,
  },
  overviewData: {
    type: Object,
    required: false,
  },
  memberData: {
    type: Array,
    default: () => [],
  },
  teamData: {
    type: Array,
    default: () => [],
  },
});

const tabActive = ref(0);

const cp_tabItems = computed(() => {
  if (props.isTeam) {
    return props.items;
  }
  return props.items.filter((item) => item.props !== "averageVisitPlanPerPerson");
});

const tabTitles = computed(() => {
  return cp_tabItems.value.map((item) => item.title);
});

function handleTabClick(index) {
  tabActive.value = index;
}

const tabList = computed(() => {
  return cp_tabItems.value.map((item) => {
    const key = item.props;
    const unit = item.unit;
    // const fixedNum = item.fixedNum || 2;
    const list = props.isTeam ? props.teamData : props.memberData;

    console.log("list: ", list, props.teamData, props.memberData);
    const dList = list.map((v) => {
      return {
        label: props.isTeam ? v.deptName : v.userName,
        value: parseFloat(v[key]).toFixed(2),
        id: v.id,
        unit: v.unit,
        ssoUserId: v.ssoUserId,
      };
    });

    let total = 0;

    for (const item of dList) {
      if (unit) {
        item.value *= 100;
        item.value = parseFloat(item.value).toFixed(2);
      }
      if (item.value.endsWith(".00")) {
        item.value = parseFloat(item.value).toString();
      }
      item.unit = unit;
      total += parseFloat(item.value);
    }

    console.log("dList: ", dList);

    let averageSource = 0;
    if (dList.length > 0) {
      averageSource = (total / dList.length).toFixed(2) || 0;
    }

    return {
      list: dList,
      averageSource,
      total,
      unit,
    };
  });
});

const isExpanded = ref(false);

const visibleItems = computed(() => {
  return props.items;
});

function toggleExpand() {
  isExpanded.value = !isExpanded.value;
}

const showSalesCapabilityAssessment = ref(false);
const showSalesTargetDetails = ref(false);
const showSalesTaskDetail = ref(false);
const name = ref("");
const id = ref("");
const ssoUserId = ref("");

function handleClick(item) {
  if (!props.enableChart) {
    return;
  }
  name.value = item.label;
  id.value = item.id;
  ssoUserId.value = item.ssoUserId;
  console.log(item);

  tabActive.value;

  let activeItem = props.items[tabActive.value];
  let activeProps = activeItem.props;
  console.log("tabActive: ", activeProps);
  if (activeProps === "visitTargetAchievementRate") {
    showSalesTargetDetails.value = true;
    console.log("showSalesTargetDetails: ", showSalesTargetDetails);
  }
  if (activeProps === "salesAbilityPassRate") {
    showSalesCapabilityAssessment.value = true;
    console.log("showSalesCapabilityAssessment: ", showSalesCapabilityAssessment);
  }
  if (activeProps === "taskCompletePassRate") {
    showSalesTaskDetail.value = true;
    console.log("showSalesTaskDetail: ", showSalesTaskDetail);
  }
}
</script>

<style lang="less" scoped>
.score-card-item {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  .gradient-bg {
    background: linear-gradient(90deg, #436bff 0%, #6b92ff 100%);
  }

  :deep(.el-tooltip__trigger) {
    &:hover {
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }
  }
}

.overflow-x-auto::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari 和 Opera */
}
</style>
